<template>

    <h3>vue页面</h3>

    <input type="text" v-model="val">

    <p>选择了 {{ len }}条数据</p>

    <ul>
        <li v-for="item in searchTodoList" :key="item.id">
            <input type="checkbox" name="" id="" v-model="item.state">
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
            <img :src="item.img" alt="">
            <button @click="handClickDel(item.id)">删除</button>
        </li>
    </ul>
</template>

<script setup>
import axios from 'axios';
import { ref, computed } from 'vue'

// 定义一个空数组
const todoList = ref([])
const val = ref('')

// 删除事件
const handClickDel = id =>{
    todoList.value = todoList.value.filter(v =>{
        return v.id !== id
    })
}

const len = computed(()=>{
    // 筛选出数据中state状态为true的数据
    // filter返回的是个数组，所以拿到数组的length
    return searchTodoList.value.filter(v => v.state).length
})

// 筛选数据
const searchTodoList = computed(()=>{
    return todoList.value.filter(v =>{
        return v.title.includes(val.value)
    })
})

// 请求数据
const getDate = () => {
    axios.get('/api/list').then(res => {
        console.log(res, 'res');
        if (res.status === 200 && res.data.code === 200) {
            todoList.value = res.data.data
        }
    })
}

getDate()
</script>


<style lang="scss">
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

</style>